// 人员类型
<template>
    <div  class='personal-type '>
        <div class="content tag" :style='tagStyle'  @click='toClick' >
            <i class="icon iconfont" :class='conf.icon' v-show='conf.showIcon'></i>
            <span>
                {{conf.label}}   
            </span>    
        </div>
    </div>
</template>

<script lang='ts'>
import {Component, Prop, Watch, Vue} from 'vue-property-decorator'

@Component({})
export default class personalType extends Vue{
    name:string = 'personal-type'

    @Prop()
    conf

    toClick(e){
        
        if(this.conf.checkable){
            this.showColor = !this.showColor;
        }

        this.$emit('click', this.showColor)
    }
    
    showColor:boolean = true
    
    defaultStyle =  {
        background: '#f7f7f7'
    }

    actionStyle = {
        color: '#fff'
    }

    get tagStyle(){
        return (this.conf.color && this.showColor) ? {...this.actionStyle, color:  this.conf.color} : this.defaultStyle
    }

}

</script>

<style scoped lang='scss'>

.personal-type{
    display: inline-block;
    margin: _rem(4px);
    cursor: default;
   
    
    .content{
        display: flex;
        align-items: center;
        vertical-align: bottom;

        span{
            display: inline-block;
            padding-top: _rem(3px); //补齐高度
        }
    }
    .icon{
        margin-right: _rem(2px);
    }
    
    .title{
        padding: _rem(4px);
        background: $main_color;
        border-radius: $border_radius;
        text-align: center;
    }
}
.tag{
    padding:  0 _rem(6px);
    border-radius: $border_radius;
    background: $block_bg_color;
    font-size: $font-small;
}

</style>